<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不确定列应用(flex)</title>
    <style>
        .divcss ul {
            margin: 0;
            padding: 0;
            width: 700px;
            height: 100px;
            display: flex;
            align-items: center;
        }

        .divcss li {
            width: 5px;
            /*height: 50x;*/
            flex: 1;
            background-color: pink;
            text-align: center;
            line-height: 100px;
        }

        .div-whole {
            display: flex;
            width: 300px;
            height: 550px;
            background-color: #F7F7F7;
            position: relative;
        }

        .div-head {
            width: 300px;
            height: 50px;
            background-color: green;
        }

        .div-body {
            width: 300px;
            height: 450px;
            position: relative;
        }

        .div-side {
            width: 100px;
            height: 450px;
            background-color: yellow;
        }
        .div-main {
            width: 200px;
            height: 450px;
            background-color: pink;
        }

        .div-footer {
            background-color: blue;
        }


    </style>
</head>
<body>
    <header>列增加或减少样式不变</header>
    <div class="divcss">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>